<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿北京大学官网主页</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<!--顶部导航-->
<header class="navbar navbar-default" id="header">
    <div class="container">
        <div class="navbar-collapse collapse navbar-left">
            <ul class="navbar-nav nav">
                <li><a href="javascript:void(0)">学生</a></li>
                <li id="middle-li1"><a href="javascript:void(0)">教职工</a></li>
                <li><a href="javascript:void(0)">家长</a></li>
            </ul>
        </div>

        <div class="navbar-collapse collapse navbar-right">
            <ul class="navbar-nav nav">
                <li><a href="javascript:void(0)">门户</a></li>
                <li id="middle-li2"><a href="javascript:void(0)">网络</a></li>
                <li><a href="javascript:void(0)">BBS</a></li>
            </ul>
        </div>
    </div>
</header>
<!--logo部分-->
<nav id="nav">
    <div class="container">
        <a href="javascript:void(0)"><img src="image/logo.png" alt=""/></a>
    </div>
</nav>
<!--底部导航-->
<div class="container">
    <ul class="nav nav-tabs" id="nav-tabs">
        <li class="dropdown" id="touch-me">
            <a data-toggle="dropdown" class="btn">北大概况</a>
            <div class="row dropdown-menu" id="first-con">
                <div class="col-md-4">
                    <img src="image/gaikuang.jpg" alt="" class="img-responsive"/>
                </div>
                <div class="col-md-2 text-center" id="poem">
                    <p>北大是常为新的，</p>
                    <p>改进的运动的先锋，</p>
                    <p>要使中国向着好的，</p>
                    <p>往上的道路走。</p>
                </div>
                <div class="col-md-6">
                    <div class="row" id="leader">
                        <div class="col-md-4 text-center">
                            <span>北大机构</span>
                        </div>
                        <div class="col-md-4 text-center">
                            <span>现任领导</span>
                        </div>
                        <div class="col-md-4 text-center">
                            <span>现任领导</span>
                        </div>
                        <div class="col-md-4 text-center">
                            <span>北大机构</span>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="btn">招生与资助</a>
        </li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="btn">院系设置</a>
        </li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="btn">教育教学</a>
        </li>
    </ul>
</div>
<!--轮播图-->
<div class="carousel slide" id="carousel" data-ride="carousel" data-interval="3500">
    <ul class="carousel-indicators">
        <li class="active" data-target="#carousel" data-slide-to="0"></li>
        <li class="active" data-target="#carousel" data-slide-to="1"></li>
        <li class="active" data-target="#carousel" data-slide-to="2"></li>
    </ul>
    <div class="carousel-inner">
        <div class="item active">
            <a href="javascript:void(0)">
                <img src="image/轮播图1.jpg" alt="" class="img-responsive"/>
            </a>
            <span id="my-span1">轮播图1</span>
        </div>
        <div class="item">
            <a href="javascript:void(0)">
                <img src="image/轮播图2.jpg" alt="" class="img-responsive"/>
            </a>
            <span id="my-span2">轮播图2</span>
        </div>
        <div class="item">
            <a href="javascript:void(0)">
                <img src="image/轮播图3.jpg" alt="" class="img-responsive"/>
            </a>
            <span id="my-span3">轮播图3</span>
        </div>
    </div>
</div>
<!--主体部分-->
<div class="container">
    <h2 id="h2">北大新闻</h2>
    <div>
        <div class="row">
            <div class="col-md-4">
                <a href="javascript:void(0)">
                    <img src="image/news1.JPG" alt="" width="100%"/>
                </a>
                <p id="my-p">“互信·合作·共享”——2016年北京论坛在钓鱼台国宾馆隆重开幕</p>
            </div>
            <div class="col-md-4">
                <ul class="list-unstyled" id="my-li1">
                    <li>朱善璐辅导学生骨干学习党的十八届六中全会精神</li>
                    <li>北大就业中心在Edx全球慕课平台开设国内首门中英双语学生职业指导课程</li>
                    <li>北京大学第六医院成功召开精神专科医院院际合作院长论坛</li>
                    <li>方正集团党委认真传达学习党的十八届六中全会精神</li>
                    <li>林建华：进一步深化人事制度改革 提升北大人才竞争力</li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="list-unstyled" id="my-li2">
                    <li>朱善璐辅导学生骨干学习党的十八届六中全会精神</li>
                    <li>北大就业中心在Edx全球慕课平台开设国内首门中英双语学生职业指导课程</li>
                    <li>北京大学第六医院成功召开精神专科医院院际合作院长论坛</li>
                    <li>方正集团党委认真传达学习党的十八届六中全会精神</li>
                    <li>林建华：进一步深化人事制度改革 提升北大人才竞争力</li>
                </ul>
            </div>
        </div>
        <div class="row" style="margin-top: 50px;">
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/信息公开.jpg" alt=""/></a>
                <p class="my-super-p1">信息公开</p>
            </div>
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/党代表热线.jpg" alt=""/></a>
                <p class="my-super-p2">党代表热线</p>
            </div>
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/校园地图.jpg" alt=""/></a>
                <p class="my-super-p3">校园地图</p>
            </div>
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/未名BBS.jpg" alt=""/></a>
                <p class="my-super-p4">未名BBS</p>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/慕课.jpg" alt=""/></a>
                <p class="my-super-p5">慕课</p>
            </div>
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/校内门户.jpg" alt=""/></a>
                <p class="my-super-p6">校内门户</p>
            </div>
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/网络服务.jpg" alt="" width="194px"/></a>
                <p class="my-super-p7">网络服务</p>
            </div>
            <div class="col-md-3 text-center">
                <a href="javascript:void(0)"><img src="image/相关链接.jpg" alt=""/></a>
                <p class="my-super-p8">相关链接</p>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="container">
        版权所有 @北京大学 | 地址：北京市海淀区颐和园路5号 | 邮编：100871 | 邮箱：webmaster@pku.edu.cn | 京ICP备05065075号-1 | 京公网安备 110402430047 号
    </div>
</footer>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
    $("#touch-me").hover(function(){
        $("#first-con").show();
    },function(){
        $("#first-con").hide();
    })
})
</script>
</body>
</html>